<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-点</title>
        <script include="vue" exclude="plugin,mapboxgl" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map id="map" 
                :map-style="mapStyle" 
                :zoom="mapZoom" 
                :center="outerCenter" 
                :crs="mapCrs" 
                v-on:load="handleMapLoad"
            >
                <mapgis-mvt-style-layer 
                    :mvt-style="styleUrl" 
                    :mode="styleMode"
                >
                </mapgis-mvt-style-layer>
            </mapgis-web-map>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        mapStyle: {
                            version: 8, //设置版本号，一定要设置
                            sources: {}, //添加来源
                            layers: [], //设置加载并显示来源的图层信息
                            //特别注意，这里是字体库，下面的sprite才是样式库
                            glyphs: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf',
                            //特别注意，这里是真正的图片样式库
                            sprite: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite'
                        }, // 地图样式
                        mapZoom: 3, // 地图初始化级数
                        outerCenter: [114.39960479736327, 30.495722001885323], // 地图显示中心
                        mapCrs: 'EPSG:4326',
                        styleUrl: 'http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/styles/OSM全中国经纬度.json',
                        styleMode: 'add', // add set
                    };
                },
                methods: {
                    handleMapLoad(payload) {
                        let map = payload.map;
                    }
                }
            });
        </script>
    </body>
</html>
